<template>
    <div id="app">
    <el-container>
      <el-main>
        <el-form label-width="120px" :model="params" :rules="formRules" ref="dataForm">
          <el-form-item label="身份证号码" prop="idNumber">
            <el-input v-model="params.idNumber"></el-input>
          </el-form-item>
          <el-form-item label="学期" prop="semesterId">
          <el-select v-model="params.semesterId" filterable clearable placeholder="请选择">
            <el-option
                v-for="sOption in semesterOptions"
                :key="sOption.id"
                :label="sOption.name"
                :value="sOption.id">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryScore">查询</el-button>
          </el-form-item>
        </el-form>

        <div v-if="scoreData">
            <!-- 表格 -->
            <el-table
              :data="scoreData"
              element-loading-text="数据加载中"
              border
              fit
              highlight-current-row>
                <el-table-column
                  label="序号"
                  width="70"
                  align="center">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <!-- 姓名 学期 课程名称 课程成绩 成绩标志(优 良 及格 不及格)
                 课程性质(二级标题) 课程类别(一级标题) 考试性质(名称) -->
                <el-table-column prop="studentName" label="姓名" width="100" align="center"/>
                <el-table-column prop="semesterName" label="学期" width="150" align="center"/>
                <el-table-column prop="courseName" label="课程名称" width="150" align="center"/>
                <el-table-column prop="score" label="总成绩" width="100" align="center"/>
                <el-table-column prop="level" label="成绩等级" width="70" align="center"/>
                <el-table-column prop="twoTitle" label="课程性质" width="150" align="center"/>
                <el-table-column prop="oneTitle" label="课程类别" width="150" align="center"/>
                <el-table-column prop="examDate" label="考试日期" width="150" align="center"/>
            </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import semesters from '@/api/cms/semesters'
import examScores from '@/api/cms/examScores'
export default {
    data() {
        return {
            score: 0,
            params:{},
            semesterOptions: undefined,
            // 表单验证规则
            formRules: {
                idNumber: [
                  { required: true, message: '请输入身份证信息', trigger: 'blur' },
                  { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不正确', trigger: 'blur' }
                ],
            },
            scoreData: null
        }
    },
    created() {
      this.getSemesterOption();
    },
    methods: {
        queryScore() {
          // 查询成绩
          this.$refs.dataForm.validate(valid => {
            // console.log(valid)
            if (valid) {
                // 表单验证通过
                examScores.getExamScores(this.params).then(res=>{
                  console.log(res)
                  this.scoreData = res.data.content
                }).catch(err=>{
                  console.log(err)
                  this.$message.error('成绩查询失败');
                })
            } else {
                // 表单验证失败
                this.$message.error('请正确输入表单');
                this.scoreData = null;
            }
        })
        },
        // 获取学期数据
        getSemesterOption() {
          semesters.findAllSemesters().then(res=>{
            console.log(res)
            this.semesterOptions = res.data.content
          }).catch(err=>{
            console.log(err)
          })
        }
    },
}
</script>

<style scoped>

</style>